<template>
    <el-form :model="register" ref="register" label-width="100px" class="demo-dynamic">
        <el-form-item
                prop="account"
                key="account"
                label="用户名"
                :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]"
        >
            <el-input v-model="register.account"></el-input>
        </el-form-item>
        <el-form-item
                prop="account"
                key="account"
                label="手机"
                :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]"
        >
            <el-input v-model="register.account"></el-input>
        </el-form-item>
        <el-form-item
                prop="account"
                key="account"
                label="邮箱"
                :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]"
        >
            <el-input v-model="register.account"></el-input>
        </el-form-item>
        <el-form-item
                label="密码"
                key="password"
                prop="password"
                :rules="{required: true, message: '密码不能为空', trigger: 'blur'}">
            <el-input v-model="register.password"></el-input>
            <el-row type="flex" class="row-bg" justify="center">
                <el-button type="primary" @click="login('register')">登录</el-button>
                <el-button @click="register('register')">注册</el-button>
            </el-row>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        data() {
            return {
                register: {
                    account: '',
                    password: '',
                }
            };
        },
        methods: {
            login(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('login', this.register)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            register(formName) {
                this.$refs[formName].resetFields();
            },
        }
    }
</script>